<template>
    <view class="mine-page">

        <view class="head">
            <image v-if="hasToken" @click="getToSet" src="../../static/images/my/mipmap-xxxhdpi/12.png" class="settingsIcon"></image>
        </view>
        
        <view class="message">
            <image src="../../static/images/my/mipmap-xxxhdpi/11.png" class="headPortrait"></image>
            <p class="nickname" @click="login">{{mobile}}</p>
            <image src="../../static/images/my/mipmap-xxxhdpi/2.png" class="crownIcon"></image><p class="expire">普通会员</p>
            <view class="open" @click="goToPurchase">
                <p>开通会员></p>
            </view>
        </view>
        
        <image src="../../static/images/my/mipmap-xxxhdpi/1.png" class="invitation" @click="goToInvitation"></image>
        
        <view class="autonym" @click="goToRealNameAuthentication">
            <image src="../../static/images/my/mipmap-xxxhdpi/5.png" class="set"></image><p>实名认证</p><span>></span>
        </view>
        <view class="autonym" @click="goToPurchaseRecord">
            <image src="../../static/images/my/mipmap-xxxhdpi/4.png" class="set"></image><p>购买记录</p><span>></span>
        </view>
        <view class="autonym" @click="goToDeviceManagement">
            <image src="../../static/images/my/mipmap-xxxhdpi/6.png" class="set"></image><p>设备管理</p><span>></span>
        </view>
        <view class="autonym" @click="goToCustomerService">
            <image src="../../static/images/my/mipmap-xxxhdpi/7.png" class="set"></image><p>联系客服</p><span>></span>
        </view>
        <view class="autonym" @click="goToUsinghelp">
            <image src="../../static/images/my/mipmap-xxxhdpi/9.png" class="set"></image><p>使用帮助</p><span>></span>
        </view>
        <view class="autonym" @click="goToAdviceFeedback">
            <image src="../../static/images/my/mipmap-xxxhdpi/10.png" class="set"></image><p>意见反馈</p><span>></span>
        </view>
        
        
    </view>
</template>

<script setup>
	import { info } from '../../api/login';
	import { onShow } from "@dcloudio/uni-app";
	import {ref, onMounted } from 'vue';
	
	const mobile = ref('未登录'); // 用户手机号
	const hasToken = ref(false); // 用于表示是否隐藏设置
	
	onMounted(() => {
	    getInformation(); // 获取用户信息
		});
	
	let isFirstLoad = ref(true); 
	onShow(() => {
		// 登录后第一次进入页面会进行页面更新
		if(isFirstLoad && uni.getStorageSync('token')){
			getInformation();
			isFirstLoad = false;
			// 退出后第一次进入页面会进行页面更新
		}else if(!isFirstLoad && !uni.getStorageSync('token')){ 
			getInformation();
			isFirstLoad = true;
		}
	})
	
	// 获取用户信息
	const getInformation = async () => {
	    try {
	        const res = await info();
			
			
	        // console.log('接口返回的完整数据：', res);
	
	        if (res.code) {
	            // 添加其他成功提示的逻辑
	            console.log('成功获取用户信息');
				mobile.value = res.data.mobile; // 更新用户手机号
				hasToken.value = true;
	        } else {
	            // 添加显示错误提示信息的逻辑
	            console.error('获取用户信息失败：', res.msg);
				mobile.value = ('未登录'); // 用户手机号
				hasToken.value = false;
	        }
	    } catch (error) {
	        console.error('获取用户信息过程中出现错误：', error.message);
			mobile.value = ('未登录'); // 用户手机号
			hasToken.value= false;
	    }
	};
	
	// 未登录状态下点击进入登录页面
	const login = () => {
		if(mobile.value === '未登录')
		uni.navigateTo({
		url: '/pages/purchase/login/login',
		animationType: 'pop-in',
		animationDuration: 1000,
		})
	}
	
	// 转向设置页面
	const getToSet = () =>{
		if(hasToken){
			uni.navigateTo({
			url:'/pages/mine/set/set'
			})
		}
	}
	
	// 转向购买页面
	const goToPurchase = () =>{
		uni.switchTab({
			url:'/pages/purchase/purchase'
		})
	}
	// 转向邀请好友
	const goToInvitation = () =>{
		uni.navigateTo({
			url:'/pages/index/invitation/invitation'
		})
	}
	// 转向实名认证
	const goToRealNameAuthentication = () =>{
		uni.navigateTo({
			url:'/pages/mine/realNameAuthentication/realNameAuthentication'
		})
	}
	// 转向购买记录
	const goToPurchaseRecord = () =>{
		uni.navigateTo({
			url:'/pages/mine/purchaseRecord/purchaseRecord'
		})
	}
	// 转向设备管理
	const goToDeviceManagement = () =>{
		uni.navigateTo({
			url:'/pages/mine/deviceManagement/deviceManagement'
		})
	}
	// 转向联系客服
	const goToCustomerService = () =>{
		uni.navigateTo({
			url:'/pages/mine/customerService/customerService'
		})
	}
	// 转向使用帮助
	const goToUsinghelp = () =>{
		uni.navigateTo({
			url:'/pages/mine/usinghelp/usinghelp'
		})
	}
	// 转向意见反馈
	const goToAdviceFeedback = () =>{
		uni.navigateTo({
			url:'/pages/mine/adviceFeedback/adviceFeedback'
		})
	};
	

	
</script>

<style lang="scss" scoped>
	// 背景
.mine-page{
	 width: 100%;
	 height: 270px;
	 background-image: url('@/static/images/my/mipmap-xxxhdpi/3.png');
	 background-size: 100%;
	 background-size: cover;
	 background-repeat: no-repeat;
	 // background-position: center;
	 // background-color: #aaddfa;
}
	// 设置
.head{
	// background-color: #fff123;
	margin: 0 auto;
	text-align: right;
	width: 85%;
	height: 80px;
	padding: 50px 0 20px 0;
}
.settingsIcon{
	width: 25px;
	height: 25px;
}
.message{
	width: 90%;
	height: 100px;
	margin: 0 auto;
	position: relative;
	// background-color: #55aaff;
}
	// 头像
.headPortrait{
	border-radius: 50%;
	width: 60px;
	height: 60px;
	position: absolute;
	// left: 50px;
	// top: 35px;
}
	// 用户名
.nickname{
	position: absolute;
	font-weight: bold;
	font-size: 15px;
	left: 70px;
	top: 8px;
}
	// 皇冠图标
.crownIcon{
	width: 10px;
	height: 10px;
	position: absolute;
	left: 72px;
	top: 35px;
}
	// 普通会员
.expire{
	position: absolute;
	font-size: 11px;
	left: 87px;
	top: 33px;
}
.open{
	margin-left: auto;
	height: 25px;
	width: 70px;
	border-radius: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 13px;
	color: #2878ff;
	background-color: #ffffff;
	position: absolute;
	top: 15px;
	right: 15px;
}
	// 邀请
.invitation{
	width: 90%;
	height: 70px;
	display: block;
	margin: 0 auto;
	margin-bottom: 30px;
}
.autonym{
	width: 87%;
	height: 60px;
	display: block;
	margin: 0 auto;
	margin-top: 10px;
	position: relative;
	// background-color: #ffaaff;
	display: flex;
	align-items: center;
	border-bottom: 0.5px solid #d7d7d7;
}
.set{
	width: 22px;
	height: 21px;
}
.autonym p{
	margin-left: 10px;
	font-size: 17px;
	// background-color: #ff00ff;
}
.autonym span{
	// background-color: #55aa7f;
	position: absolute;
	right: 0;
	color: #d7d7d7;
}
</style>
